{% extends 'layout.html' %}
{% load color %}
{% block css %}
    <style>
        .error-message {
            color: red;
            position: absolute;
        }
    </style>
{% endblock %}
{% block content %}
    <div style="margin-bottom: 5px" class="clearfix">
        <button id="btnAdd" class="btn btn-success">
            <span class="glyphicon glyphicon-plus-sign"></span>新建
        </button>
        <div class="right">
            {# 用form表单提交 #}
            <form class="form-inline" method="get">
                <div class="form-group">
                    <label for="searchBox">搜索</label>
                    <input id="searchBox" name="keyword" type="text" class="form-control"
                           placeholder="请输入关键字" value="{{ keyword }}">
                </div>
                <button type="submit" class="btn btn-default">
                    {# 放大镜图标 #}
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </form>
        </div>
    </div>
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>订单号</th>
            <th>类型</th>
            <th>交易金额</th>
            <th>交易时间</th>
            <th>备注</th>
        </tr>
        </thead>
        <tbody>
        {% for row in pager.queryset %}
            <tr>
                <td>
                    {% if row.oid %}
                        {{ row.oid }}
                    {% else %}
                        -
                    {% endif %}
                </td>
                <td>
                    <span class="btn btn-xs btn-{{ row.charge_type|color }}">{{ row.get_charge_type_display }}</span>
                </td>
                <td>{{ row.price }}</td>
                <td>{{ row.create_date|date:'Y-m-d H:i:s' }}</td>
                <td>
                    {% if row.oid %}
                        {{ row.remarks }}
                    {% else %}
                        -
                    {% endif %}
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    <ul class="pagination">
        {{ pager.html }}
    </ul>
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">新建数据</h4>
                </div>
                <div class="modal-body">

                    <form class="form-horizontal" id="addForm" novalidate>
                        {% csrf_token %}
                        {% for field in form %}
                            <div class="form-group">
                                <label class="col-sm-2 control-label">{{ field.label }}</label>
                                <div class="col-sm-10" style="position: relative;margin-bottom: 25px">
                                    {{ field }}
                                    <span class="error-message">{{ field.errors.0 }}</span>
                                </div>
                            </div>
                        {% endfor %}
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                    <button type="button" class="btn btn-primary" id="btnAddSubmit">提 交</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    <script>
        $(function () {
            $("#btnAdd").click(function () {
                $("#addModal").modal('show');
            })
            $('#btnAddSubmit').click(function () {
                $('.error-message').empty();
                $.ajax({
                    url: '{% url 'user_charge_add' pk=pk %}',
                    data: $('#addForm').serialize(),
                    dataType: 'JSON',
                    type: 'POST',
                    success: function (res) {
                        if (res.status) {
                            window.location.reload();
                        } else {
                            $.each(res.detail, function (k, v) {
                                $('#id_' + k).next().text(v[0]);
                            })
                        }
                    }

                })
            })
        })
    </script>
{% endblock %}
